<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!--
        Vue定义一个组件：
        1、定义组件
        2、注册组件（全局注册、局部注册）
        3、使用组件

        组件之间的通信：props 父传子
    -->

    <!-- 准备好一个容器-->
    <div id="app">
        <!-- 每写一个组件标签，就会new一个VueComponent实例 -->
        <Student v-bind:name="student1.name" :age="student1.age"></Student>
        <Student :name="student2.name" :age="student2.age"></Student>
        <Banji></Banji>
        <Banji></Banji>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        // VueComponent
        //创建学生Student组件,组件里面有html页面、data、methods、css
        const Student = Vue.extend({
            template: `
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
                <button @click="showStudentInfo()">显示学生信息</button>
            </div>
            `,
            props: ['name', 'age'],// 子组件通过props接受父组件传递过来的数据
            data() {
                return {
                }
            },
            methods: {
                showStudentInfo() {
                    alert(this.name + ' : ' + this.age);
                },
            }
        })
        
        // 创建Banji组件
        const Banji = Vue.extend({
            template: `
            <div>
                <h2>班级名字：{{banjiName}}</h2>
                <h2>班级人数：{{banjiCount}}</h2>
                <button @click="showBanjiInfo()">显示班级信息</button>
            </div>
            `,
            //el: '#root' //定义组件时候不需要写el
            data() {
                return {
                    banjiName: 'Java2207',
                    banjiCount: 30
                }
            },
            methods: {
                showBanjiInfo() {
                    alert(this.banjiName + ' : ' + this.banjiCount);
                }
            }
        })


        //创建vue实例
        new Vue({
            el: '#app',
            data: {
                student1: {
                    name: '张三',
                    age: 23
                },
                student2: {
                    name: '李四',
                    age: 24
                } 
            },
            components: {// 注册组件（局部注册）
                Student,
                Banji
            }
           
        })
    </script>
</body>

</html>